<template>
  <div>
    <template v-if="list.length > 0">
      <el-card class="msg_item" :body-style="{paddingTop:'10px'}" shadow="hover" v-for="(item,index) in list" :key="index">
        <!-- 主体 -->
        <div class="msg_item_head" v-if="item.userId">
          <h4 class="msg_item_title">
            <el-avatar shape="square" :src="makeUserPhoto(item.user && item.user.name || '（用户已注销）')"></el-avatar>
            <span>{{item.user && item.user.name || '（用户已注销）'}}</span>
            <i v-if="item.userId == user.userId">(我)</i>
            <span class="time">{{item.createdAt}}</span>
          </h4>
          <el-popconfirm title="是否删除该信息？" @confirm="deleteItem(item.id)" v-if="item.userId == user.userId || user.admin">
            <el-button slot="reference" size="mini">删除</el-button>
          </el-popconfirm>
        </div>
        <div class="msg_item_content">
          <span v-html="item.content"></span>
          <el-link type="primary" class="reply_btn" v-if="item.userId != user.userId" @click="replyItem(item.id,item.userId)">回复</el-link>
        </div>

        <!-- 回复 -->
        <template v-if="item.replies.length > 0">
          <div class="msg_item_content reply" v-for="(v,i) in item.replies" :key="i">
            <span class="reply_time">{{v.createdAt}}</span>
            <span class="reply_name">{{v.user && v.user.name || '（用户已注销）'}}
              <i v-if="v.userId == user.userId">(我)</i>
              <span> @ {{v.replyUser && v.replyUser.name || '（用户已注销）'}}<i v-if="v.replyUserId == user.userId">(我)</i>：</span>
            </span>
            <span class="" v-html="v.content"></span>
            <el-link type="primary" class="reply_btn" v-if="v.userId != user.userId" @click="replyItem(item.id,v.userId)">回复</el-link>
            <el-popconfirm title="是否删除该信息？" @confirm="deleteReply(v.id)" v-if="v.userId == user.userId || user.admin">
              <el-link slot="reference" type="info" class="reply_btn">删除</el-link>
            </el-popconfirm>
          </div>
        </template>
      </el-card>
    </template>
    <el-empty v-else :description="tip||'暂无数据'"></el-empty>
  </div>
</template>

<script>
import Identicon from 'identicon.js' // 类github 头像
import md5 from 'md5'

export default {
  name: 'MsgList',
  props: {
    list: Array,
    tip: String,
  },
  data() {
    return {
      isLogin: false,
      user: {
        userId: '',
        name: '',
        email: '',
        content: '',
        admin: false,
      },
    }
  },
  mounted() {
    this.getUser()
  },
  watch: {
    '$store.state.isLogin': function (newVal) {
      this.getUser()
    }
  },
  methods: {
    // 获取用户信息
    getUser() {
      const user = this.$store.state.user
      if (user.userId) {
        this.isLogin = true
        this.user.userId = user.userId
        this.user.name = user.name
        this.user.email = user.email
      }
    },
    // 动态生成用户头像
    makeUserPhoto(name) {
      const code = md5(name)
      const data = new Identicon(code, 420).toString()
      return 'data:image/png;base64,' + data
    },
    deleteItem(itemId) {
      this.$emit('delete', itemId)
    },
    replyItem(itemId, replyUserId) {
      // 如果未登录则弹出登录框
      if (!this.isLogin) {
        this.$bus.emit('showLogin')
        return false
      }
      this.$emit('reply', itemId, replyUserId)
    },
    // 删除回复
    deleteReply(itemId) {
      this.$emit('delReply', itemId)
    },
  },
}
</script>

<style scoped lang="scss">
.msg_item {
  margin: 20px 0;
  &_head {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  &_title {
    margin-bottom: 20px;
    color: $light-black;
    .el-avatar {
      position: relative;
      top: 10px;
      margin-right: 10px;
    }
    .time {
      font-size: 14px;
      color: $light-gray;
      font-weight: 100;
      margin-left: 20px;
    }
  }
  .reply {
    position: relative;
    margin-top: 4px;
    margin-left: 24px;
  }

  // 回复按钮
  .reply_btn {
    // float: right;
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .reply_time {
    color: $light-gray;
    padding-right: 10px;
  }

  .reply_name {
    // background: $light-white !important;
    // display: inline-block;
  }

  &_content {
    background-color: $light-white;
    border-radius: 4px;
    padding: 5px 15px 28px;
    font-size: 14px;
    line-height: 1.5;
    position: relative;
  }
}
</style>